<template>
	<scroll-view class="backview" bounces="false">
		<lexiconNavVue title="单词详情" />
		<view class="top-menu">
		</view>
		<scroll-view class="words-scroll" :style="{ height: scrollHeight + 'px'}" scroll-y
			:scroll-with-animation='true'>
			<view class="content-back">
				<view class="sigin-calendar-backView">
					<view class="gameType-topTitle-view">
						<view class="gameType-topTitle" style="color: white;">
							单词详情 | Word details
						</view>
						<view class="gameType-line"></view>
					</view>
					<view class="feedback" @click="handleFeedback">问题反馈</view>
					<view class="word-detailback">
						<view class="word-class">{{word_detail.spell}}<span
								style="font-size: 12px; margin-left: 10px;">{{word_detail.partofSpeech}}</span></view>
						<view class="word-bottom">
							<view class="phonetic-symbols">{{word_detail.internationalPhoneticAlphabet}}</view>
							<view class="word-icon">
								<view class="voice-imageback" @click='audioPronounciation'>
									<image v-if='!showPronounciation' src='@/static/image/planbee/voice_bigger_off.png'
										class='word-iconimg-big iconimg'></image>
									<image v-else src='@/static/image/planbee/voice_word_bigger.png'
										class='word-iconimg-big iconimg'>
									</image>
								</view>
							</view>
						</view>
						<view class="word-bottom-message" v-if="word_detail.internationalPhoneticAlphabet">
							注：此处音标仅供选手备赛参考使用</view>
						<view class="word-bottom-message2" v-if="word_detail.internationalPhoneticAlphabet">
							实际Spelling Bee比赛中以现场发音为准。</view>
<!-- 						<image class="word-image" src="@/static/image/banner.png" mode="aspectFit"></image> -->
						<!-- <view v-if="word_detail.chinesemeaning" class="word-example-title" @click='audioChinese'> -->
						<view v-if="word_detail.chinesemeaning" class="word-example-title">
							<text class="word-example-num">英译汉</text>
							<!-- <view class="voice-imageback">
								<image v-if="!showChinese" src='@/static/image/planbee/voice_bigger_off.png'
									class='word-iconimg iconimg'></image>
								<image v-else src='@/static/image/planbee/voice_bigger.png'
									class='word-iconimg iconimg'>
								</image>
							</view> -->
						</view>
						<view v-if="word_detail.chinesemeaning" class="word-example-content">{{word_detail.chinesemeaning}}</view>
						
						<view v-if="word_detail.def" class="word-example-title" @click='audioDefinition'>
							<text class="word-example-num">Definition</text>
							<view class="voice-imageback">
								<image v-if="!showDefinition" src='@/static/image/planbee/voice_bigger_off.png'
									class='word-iconimg iconimg'></image>
								<image v-else src='@/static/image/planbee/voice_bigger.png'
									class='word-iconimg iconimg'>
								</image>
							</view>
						</view>
						<view v-if="word_detail.def" class="word-example-content">{{word_detail.def}}</view>
						
						<view v-if="word_detail.exp" class="word-example-title" @click='audioSentence'>
							<text class="word-example-num">Sentence</text>
							<view class="voice-imageback">
								<image v-if="!showSentence" src='@/static/image/planbee/voice_bigger_off.png'
									class='word-iconimg iconimg'></image>
								<image v-else src='@/static/image/planbee/voice_bigger.png'
									class='word-iconimg iconimg'>
								</image>
							</view>
						</view>
						<view v-if="word_detail.exp" class="word-example-content">{{word_detail.exp}}</view>
					</view>
					<view class='word-button-action'>
						<view @click='handleLast' :class="`${wordIndex == 0 ? 'hidden' : ''} word-button lastcolor`">
							LAST
						</view>
						<view @click='handleText'
							v-if="wordIndex == (wordLibrary.length-1) && title == '生词本' && showClockin == true"
							class="word-button">去测试</view>
						<view @click='handleText'
							v-else-if="wordIndex == (wordLibrary.length-1) && title == '打卡单词学习' && showClockin == true"
							class="word-button">去打卡</view>
						<view @click='handleNext' v-else
							:class="`word-button ${wordIndex == (wordLibrary.length-1) ? 'hidden' : ''}`">NEXT</view>
					</view>
					<!-- <view v-if="showClockin" style="width: 100%;"> -->
					<view class="word-status-now" @click="handleText" v-if="title == '打卡单词学习'">我已全部掌握，立即去打卡
					</view>
					<view class="word-status-now" @click="handleText" v-else-if="title == '生词复习'">我已全部掌握，立即去测试
					</view>
					<!-- </view> -->
				</view>
			</view>
		</scroll-view>
		<selectContentView v-if="showBeePlanPromptbox" :msg="ReportPromptMsg" :confirmTitle="leftTitle"
			:cancelTitle="rightTitle" @confirm="turnToplayGame" @replaceToBeePlan="replaceToBeePlan"
			@cancel="hideBeePlanPromptbox"></selectContentView>
	</scroll-view>
</template>

<script>
	import util from '../../utils/util';
	export default {
		data() {
			return {
				showClockin: true,
				showBeePlanPromptbox: false,
				scrollHeight: 0,
				ReportPromptMsg: '',
				word_detail: {}, //单词数据
				innerAudioContext: null, // 音频类
				
				canTapPronounciation: true, // 是否可以播放单词
				canTapChinese: true, // 是否可以播放汉语
				canTapSentence: true, // 是否可以播放例句
				canTapDefinition: true, // 是否可以播放释义
				
				showPronounciation: false, // 控制单词音频小喇叭显示状态
				showSentence: false, // 控制例句音频小喇叭显示状态
				showDefinition: false, // 控制释义音频小喇叭显示状态
				showChinese: false, // 控制汉语小喇叭显示状态
			}
		},
		onUnload: function() {
			if (this.innerAudioContext) {
				this.handlePlayRadioStop();
			}
		},
		onHide: function() {
			if (this.innerAudioContext) {
				this.handlePlayRadioStop();
			}
		},
		onReady() {
			const that = this;
			uni.createSelectorQuery().select('.top-menu').boundingClientRect(rect => {
				that.scrollHeight = uni.getSystemInfoSync().windowHeight - rect.bottom;
			}).exec();
		},
		onLoad(options) {
			console.log('USER_INFO', uni.getStorageSync('USER_INFO'));
			console.log('getUserPhone____', util.getUserPhone());
			var transmitData = JSON.parse(decodeURIComponent(options.transmitData))
			var wordData = JSON.parse(decodeURIComponent(transmitData.wordData))
			var wordLibrary = JSON.parse(this.$globalData.wordListJson);
			var wordIndex = -1;
			if (transmitData.type == 'normal') {
				for (let index = 0; index < wordLibrary.length; index++) {
					const element = wordLibrary[index];
					if (element.id == wordData.id) {
						wordIndex = index;
					}
				}
			}
			console.log('transmitData____', transmitData);
			if (transmitData.wordReview && transmitData.wordReview != "undefined") {
				this.showClockin = false;
			}
			this.transmitData = transmitData;
			this.transmitData.beePlanLogId = transmitData.beePlanLogId ? transmitData.beePlanLogId : "revive";
			this.title = transmitData.title;
			this.wordData = wordData;
			this.wordLibrary = wordLibrary;
			this.wordIndex = wordIndex;
			this.type = transmitData.type;
			this.getWordDetail(wordData);
		},
		methods: {
			/**
			 * 问题反馈点击事件
			 */
			handleFeedback: function() {
				if (this.innerAudioContext) {
					this.handlePlayRadioStop();
				}
				uni.navigateTo({
					url: '/pages/lexicon/lexFeedback?wordId=' + this.word_detail.id,
				})
			},
			// 获取单词内容
			getWordDetail: function(wordData) {
				this.word_detail = wordData;
				this.audioPronounciation();
			},
			/**
			 * 单词发音点击事件 
			 */
			audioPronounciation: function(e) {
				var that = this;
				if (!this.canTapPronounciation) {
					return;
				}
				if (this.innerAudioContext) {
					this.handlePlayRadioStop();
				}
				if (this.canTapPronounciation) {
					this.handlePlayRadioStart(this.word_detail.purl);
					this.canTapPronounciation = false;
					this.showPronounciation = true;
					this.showSentence = false;
					this.showDefinition = false;
					this.showChinese = false;
					setTimeout(function() {
						that.canTapPronounciation = true;
					}, 500);
				}
			},
			/**
			 * 汉语发音点击事件 
			 */
			audioChinese: function () {
				var that = this;
				if (!this.canTapChinese) {
					return;
				}
				if (this.innerAudioContext) {
					this.handlePlayRadioStop();
				}
				if (this.canTapChinese) {
					this.handlePlayRadioStart(this.word_detail.durl);
					this.canTapChinese = false;
					this.showPronounciation = false;
					this.showSentence = false;
					this.showDefinition = false;
					this.showChinese = true;
					setTimeout(function() {
						that.canTapChinese = true;
					}, 2000)
				}
			},
			/**
			 * 释义发音点击事件 
			 */
			audioDefinition: function(e) {
				var that = this;
				if (!this.canTapDefinition) {
					return;
				}
				if (this.innerAudioContext) {
					this.handlePlayRadioStop();
				}
				if (this.canTapDefinition) {
					this.handlePlayRadioStart(this.word_detail.durl);
					this.canTapDefinition = false;
					this.showPronounciation = false;
					this.showSentence = false;
					this.showDefinition = true;
					this.showChinese = false;
					setTimeout(function() {
						that.canTapDefinition = true;
					}, 2000)
				}
			},
			/**
			 * 例句发音点击事件 
			 */
			audioSentence: function(e) {
				var that = this;
				if (!this.canTapSentence) {
					return;
				}
				if (this.innerAudioContext) {
					this.handlePlayRadioStop();
				}
				if (this.canTapSentence) {
					this.handlePlayRadioStart(this.word_detail.eurl);
					this.canTapSentence = false;
					this.showPronounciation = false;
					this.showSentence = true;
					this.showDefinition = false;
					this.showChinese = false;
					setTimeout(function() {
						that.canTapSentence = true;
					}, 2000)
				}
			},
			/**
			 * last点击事件
			 */
			handleLast: function() {
				if (this.innerAudioContext) {
					this.handlePlayRadioStop();
				}
				var index = this.wordIndex;
				index--;
				if (index >= 0) {
					var word = this.wordLibrary[index];
					this.wordIndex = index;
					var that = this;
					setTimeout(function() {
						that.getWordDetail(word);
					}, 500)
				}
			},
			/**
			 * next点击事件
			 */
			handleNext: function() {
				if (this.innerAudioContext) {
					this.handlePlayRadioStop();
				}
				var index = this.wordIndex;
				index++;
				if (index < this.wordLibrary.length) {
					var word = this.wordLibrary[index];
					this.wordIndex = index;
					var that = this;
					setTimeout(function() {
						that.getWordDetail(word);
					}, 500)
				}
			},
			/**
			 * 开始播放
			 * url 播放音频地址
			 */
			handlePlayRadioStart: function(url) {
				// 播放音频
				const innerAudioContext = uni.createInnerAudioContext()
				this.innerAudioContext = innerAudioContext;
				innerAudioContext.autoplay = true
				var encodeurl = encodeURI(url);
				innerAudioContext.src = encodeurl;
				innerAudioContext.onPlay(() => {})
				innerAudioContext.onError((res) => {
					if (res.errCode === -1 || res.errCode === 10001 || res.errCode === 10002 || res.errCode ===
						10003 || res.errCode === 10004) {
						const errorStr = ''
						switch (res.errCode) {
							case -1:
								errorStr = '未知错误';
								break;
							case 10001:
								errorStr = '系统错误';
								break;
							case 10002:
								errorStr = '网络错误';
								break;
							case 10003:
								errorStr = '文件错误';
								break;
							case 10004:
								errorStr = '格式错误';
								break;
							default:
								break;
						}
						this.showPronounciation = false;
						this.showSentence = false;
						this.showDefinition = false;
						this.showChinese = false;
						uni.showToast({
							title: errorStr,
							icon: 'none',
							duration: 2000
						})
					}
				})
				innerAudioContext.onEnded((res) => {
					this.showPronounciation = false;
					this.showSentence = false;
					this.showDefinition = false;
					this.showChinese = false;
				})
				innerAudioContext.onCanplay(() => {})
			},
			handleText: function() {
				var beePlanKey = 'beePlanDate' + (this.title == "生词复习" ? 'review' : 'clock') +
					this.transmitData.beePlanLogId + this.transmitData.dayId;
				console.log('beePlanKey_____', beePlanKey, this.transmitData.beePlanLogId)
				console.log('缓存——————————————-', uni.getStorageSync(beePlanKey))
				if (uni.getStorageSync(beePlanKey)) {
					this.showBeePlanPromptbox = true;
					this.ReportPromptMsg = '检测到您有之前未完成的打卡记录，是否继续去打卡?';
					this.leftTitle = '继续打卡';
					this.rightTitle = '重新打卡';
				} else {
					this.showBeePlanPromptbox = true;
					this.ReportPromptMsg = (this.title == "生词复习" ? '确认已学习完此阶段单词，是否立即去测试？' : '确认已学习完此阶段单词，是否立即去打卡？');
					this.leftTitle = '这就去';
					this.rightTitle = '再看看';
				}
			},

			// 错题本/打卡学习去打卡测试
			turnToplayGame: function() {
				this.hideBeePlanPromptbox();
				if (this.leftTitle == '继续打卡') {
					this.getBeePlanLocalCache();
				} else {
					if (this.title == "生词复习") {
						this.showSelectPopView();
					} else {
						this.getPlanWordList();
					}
				}
			},
			//继续打卡获取本地缓存
			getBeePlanLocalCache: function() {
				var beePlanKey = 'beePlanDate' + (this.title == "生词复习" ? 'review' : 'clock') +
					this.transmitData.beePlanLogId + this.transmitData.dayId;
				var beePlanData = JSON.parse(uni.getStorageSync(beePlanKey));
				console.log('获取打卡本地缓存-------', beePlanData);
				this.$globalData.planWordListData = beePlanData.planWordListData;
				if (this.title == "生词复习") {
					console.log('生词复习');
					uni.redirectTo({
						url: '/pages/planBee/wordClockPreliminaryGame?beePlanLogId=' +
							this.transmitData.beePlanLogId + '&beePlanIndex=' + (beePlanData.beePlanIndex +
								1) +
							'&planType=' + (this.title == "生词复习" ? 'review' : 'clock') + '&answerarray=' +
							JSON.stringify(beePlanData.answerarray),
					})
				} else {
					uni.redirectTo({
						url: '/pages/planBee/wordClockPreliminaryGame?beePlanLogId=' +
							this.transmitData.beePlanLogId + '&beePlanIndex=' + (beePlanData.beePlanIndex +
								1) +
							'&planType=' + (this.title == "生词复习" ? 'review' : 'clock') + '&wordReview=' +
							this.transmitData.wordReview + '&dayId=' + this.transmitData.dayId +
							'&answerarray=' + JSON.stringify(beePlanData.answerarray),
					})
				}
			},
			// 隐藏弹窗页面
			hideBeePlanPromptbox: function(e) {
				this.showBeePlanPromptbox = false;
				this.showPromptbox = false;
			},
			// 重新去打卡
			replaceToBeePlan: function() {
				this.hideBeePlanPromptbox();
				//删除缓存
				var beePlanKey = 'beePlanDate' + (this.title == "生词复习" ? 'review' : 'clock') +
					this.transmitData.beePlanLogId + this.transmitData.dayId;
				uni.removeStorage({
					key: beePlanKey,
				})
				if (this.title == "生词复习") {
					this.showSelectPopView();
				} else {
					this.getPlanWordList();
				}
			},
			//显示复习内容
			showSelectPopView: function(params) {
				this.ConfirmReviewGame();
			},
			// 获取生词打卡数据
			ConfirmReviewGame: function() {
				uni.redirectTo({
					url: '/pages/planBee/wordClockPreliminaryGame?beePlanLogId=' +
						this.transmitData.beePlanLogId + '&planType=' + (this.title == "生词复习" ? 'review' :
							'clock'),
				})
			},
			// 获取打卡数据
			getPlanWordList: function() {
				uni.redirectTo({
					url: '/pages/planBee/wordClockPreliminaryGame?beePlanLogId=' +
						this.transmitData.beePlanLogId + '&planType=' + (this.title == "生词复习" ? 'review' :
							'clock') + '&wordReview=' + this.transmitData.wordReview + '&dayId=' + this
						.transmitData.dayId,
				})
			},
			/**
			 * 暂停播放
			 */
			handlePlayRadioStop: function() {
				this.innerAudioContext.destroy(() => {
					console.log('销毁音频上下文对象');
				});
				this.showPronounciation = false;
				this.showSentence = false;
				this.showDefinition = false;
				this.showChinese = false;
			}
		}
	}
</script>

<style lang="less">
	.feedback {
		position: absolute;
		top: 25px;
		right: 10px;
		font-size: 11px;
		color: #000000;
		height: 25px;
		background: #fed444;
		line-height: 25px;
		text-align: center;
		border-radius: 13px;
		box-sizing: border-box;
		padding: 0 10px;
		z-index: 99;
	}

	.word_default_box {
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding-bottom: 420px;
		min-height: 100vh;
		height: 100%;
	}

	.word-container {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.word-header {
		padding: 75px 0 5px;
	}

	.word-detailback {
		width: 90%;
		position: relative;
		margin-top: 20px;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30px 0rpx;
		justify-content: center;
		background: linear-gradient(to bottom, #f7ac01, #fff7dd);
		box-shadow: 3px 3px 5px 3px rgb(160, 160, 160);
	}

	.word-class {
		color: black;
		width: 94%;
		word-wrap: break-word;
		font-size: 22px;
		text-align: center;
		font-family: 'hzgb';
	}

	.word {
		font-size: 35px;
		font-weight: bold;
		line-height: 40px;
		display: flex;
		justify-content: center;
		flex-direction: row;
		align-items: flex-end;
		color: black;
	}

	.word-content {
		text-align: center;
		max-width: 320px;
		word-wrap: break-word;
	}

	.word-bottom {
		display: flex;
		margin: 5px 20px;
		justify-content: center;
		flex-direction: row;
		word-wrap: break-word;
		align-items: center;
	}

	.phonetic-symbols {
		text-align: center;
		font-size: 17px;
		font-weight: 500;
		word-wrap: break-word;
		margin: 0rpx 10px 0 40px;
		line-height: 20px;
		flex: 1;
	}

	.word-icon {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.word-iconimg {
		width: 22px;
		height: 22px;
		margin-left: 10px;
	}

	.word-iconimg-big {
		width: 24px;
		height: 24px;
	}

	.word-example-content {
		font-size: 14px;
		width: 90%;
		text-overflow: ellipsis;
		overflow-wrap: break-word;
		text-align: center;
		color: #000;
	}

	/* .iconimg{
	    margin: 0 10rpx 0 0;
	  } */
	.audio-none {
		display: none;
	}

	.word-bottom-message {
		color: white;
		font-size: 9px;
		text-align: center;
		max-width: 325px;
		margin-top: 10px;
	}

	.word-bottom-message2 {
		color: white;
		font-size: 9px;
		text-align: center;
		max-width: 325px;
		margin-bottom: 5px;
	}

	.word-default-content {
		margin: 15px 25px;
		background-color: #fff;
		border-radius: 25px;
		height: auto;
		padding: 35px 15px 40px;
		box-sizing: border-box;
		width: 325px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.word-example-title {
		width: 150px;
		margin-top: 10px;
		border-radius: 20px;
		padding: 2px 15px;
		background-color: #f88e2a;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.word-newword-content {
		width: 100%;
		height: 40px;
		line-height: 40px;
		display: flex;
		/* justify-content: flex-end; */
		justify-content: flex-end;
	}

	.word-newword-back {
		width: 40px;
		height: 50px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.word-newword-image {
		width: 25px;
		height: 25px;
	}
	.word-image{
		width: 80%;
		height: 100px;
	}

	.word-newword-view {
		width: 40px;
		height: 25px;
		font-size: 10px;
		line-height: 15px;
		text-align: center;
	}

	.word-example-num {
		color: orange;
		font-size: 18px;
		font-weight: 700;
		color: white;
		// padding: 0 10px;
		// text-shadow: -1px 1px 0px #000, 1px 1px 0px #000;
	}

	/* .word-example-num {
	    fill: orange;
	    padding: 0 20rpx;
	    stroke: #000;
	    font-size: 45px;
	    font-weight: bolder;
	    font-family: sans-serif;
	    stroke-width: 3px;
	    stroke-linejoin: round;
	  } */


	.word-example-line {
		width: 100%;
		height: 1px;
		background: rgba(0, 0, 0, 0.3);
		margin: 15px 0 15px 0;
	}

	.voice-imageback {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.word-button-action {
		width: 85%;
		display: -webkit-flex;
		display: flex;
		flex-flow: row;
		justify-content: space-around;
		padding: 20px 0 10px 0;
		margin: 10px 40px;
	}

	.lastcolor {
		background-color: #3f3735 !important;
	}

	.word-button {
		text-align: center;
		width: 45%;
		height: 34px;
		line-height: 34px;
		font-size: 15px;
		font-weight: bold;
		border-radius: 20px;
		background: #ff8e00;
		font-family: 'hzgb';
		color: white;
	}

	.hidden {
		visibility: hidden;
	}


	.word-status-now {
		text-align: center;
		width: 80%;
		height: 34px;
		line-height: 34px;
		font-size: 15px;
		font-weight: bold;
		border-radius: 20px;
		background: #ff0b0b;
		color: white;
		/* color: #000; */
		margin-bottom: 15px;
	}

	.sigin-calendar-backView {
		width: 90%;
		margin: 30px 0px;
		position: relative;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: var(--beeGradientTopBack);
		/* background-image: url(../../static/image/fjh/daka_riliback.png);
		background-repeat: no-repeat;
		background-size: 100% 100%; */
		padding: 20px 5px;
		border-radius: 25px;
	}

	.orangeColor {
		background-color: #ffad08;
	}

	.greenColor {
		background-color: #046c49;
	}

	.pop-promot-box {
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 10000;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pop-promot-back {
		padding: 20px;
		width: 80%;
		margin: 0 10%;
		border-radius: 10px;
		background-image: url(../../static/image/fjh/onlineGameRuleBackView2.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.pop-promot-title {
		font-size: 16px;
		color: black;
		text-align: center;
		margin-bottom: 5px;
	}

	.pop-promot-bottomView {
		width: 100%;
		height: 30px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 15px;
	}

	.bottom-leftbtn {
		width: 100px;
		height: 30px;
		line-height: 30px;
		border-radius: 15px;
		font-size: 13px;
		text-align: center;
		// font-weight: 800;
	}

	.defineButton {
		color: white;
		background: linear-gradient(#fc823d, #fa3748);
	}

	.cancelButton {
		color: black;
		background-color: gray;
	}

	.reviewClass {
		width: 150px;
		height: 30px;
		line-height: 30px;
		padding: 0px 10px;
		text-align: left;
		font-size: 12px;
		background-color: rgb(249, 249, 249);
		color: black;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.review-select-back {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 10px;
	}

	.review-left-str {
		font-size: 13px;
		width: 70px;
	}
</style>